<template>
<h1>隐藏显示指令</h1>
<!--  v-if="布尔值" v-show="布尔值"
  ture元素出现false元素消失 区别：
  前者消失的元素会直接跳过渲染，DOM树没有此元素
  后者是通过CSS属性 display:none 让元素消失的-->
    <p v-if="true">sss</p>
    <p v-if="false">sss+</p>
<!--  v-else会找离他最近的v-if进行取反  -->
    <p v-else>sr</p>
    <hr>
    <p v-show="true">sp</p>
    <p v-show="false">sp+</p>
    <hr>
    <p v-if="isShow">我的热情似太阳</p>
    <p v-else>月亮代表我的心</p>
</template>

<script setup>
import {ref} from "vue";

const isShow = ref(false)
</script>

<style scoped>

</style>